<template>
  <div class="common-comment">
    <div class="comment">
      <div class="comment-title">
        <span class="comment-desc">评论</span>
        <span class="comment-len">共 {{ commentList.length }} 条评论</span>
      </div>
      <el-input class="comment-input" type="textarea" placeholder="期待您的精彩评论..." resize="none" :rows="4" v-model="textarea" />
      <el-button class="sub-btn" type="primary" @click="submitComment()">发表评论</el-button>
    </div>
    <ul class="popular">
      <p class="all-comment">所有评论</p>
      <el-divider border-style="dotted" />
      <li v-for="(item, index) in commentList" :key="index">
        <el-avatar class="popular-img" :size="50" :src="getUrl(item.avatar)" />
        <div class="item">
          <div class="info">
						<div class="name">{{ item.userName  }}</div>
						<div>{{ formatDate(item.createTime) }}</div>
					</div>
          <p>{{ item.content }}</p>
        </div>
        <div ref="up" class="comment-ctr">
          <el-icon v-if="item.userId === userId" @click="deleteComment(item.id)" class="icon"><IconPark :icon="Delete" /></el-icon>
        </div>
      </li>
    </ul>
  </div>
  </template>
  
  <script lang="ts" setup>
  import { defineProps, ref, toRefs, onMounted, toRaw } from "vue";
  //关于歌单评价和歌曲评价，前台设计是歌单评价还是歌词评价
  import { formatDate } from "@/utils/format";
  import { getPlayListComment, addPlayListComment, deletePlayListComment } from '@/api';
  import { getUrl } from '@/utils/format';
  import IconPark from '@/components/common/IconPark.vue';
  import { Delete } from '@icon-park/vue-next';
  import { ElMessage } from 'element-plus';
  const props = defineProps(['id','type'])

  const id = Number(props.id); // id
  const type = Number(props.type); // 评论类型
  
  
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const { userId } = storeToRefs(useUserStore());

  const textarea = ref(""); // 存放输入内容
  const commentList = ref([]); // 存放评论内容
  
  getComment();
  
  // 获取所有评论
  async function getComment() {
    try {
      const data = await getPlayListComment({playListId:id,type});
      commentList.value = data;
    } catch (error) {
      console.error('[获取所有评论失败]===>', error);
    }
  };
  // 提交评论
  async function submitComment() {
    const res = await addPlayListComment({userId:userId.value,playListId:id,content:textarea.value,type});
    if(res){
					ElMessage.success('添加评论成功');
					textarea.value = "";
          getComment();
				}else{
					ElMessage.error('添加评论失败');
				}
    }
  
  // 删除评论
  async function deleteComment(commentId:number) {
    const res = await deletePlayListComment(commentId,type);
    if(res){
					ElMessage.success('删除评论成功');
          getComment();
				}else{
					ElMessage.error('删除评论失败');
				}
  }
  
  </script>
  
  <style lang="scss" scoped>
  
  /*评论*/
  .common-comment{
    width: 90%;
    max-width: 1200px;
  }
  .comment {
    position: relative;
    margin-bottom: 60px;  
    .comment-title {
      height: 50px;
      line-height: 50px;
  
      .comment-desc {
        font-weight: 500;
        font-size: 24px;
      }

      .comment-len{
        font-size: 14px;
        margin-left: 15px;
        color: #999;
      }
    }
  
    .comment-input {
      display: flex;
      margin-bottom: 20px;
      margin-top: 15px;
      ::v-deep .el-textarea__inner{
        background-color: #F5F5F5 ;
        font-size: 16px
      }
    }
  
    .sub-btn {
      position: absolute;
      right: 0;
    }
  }
  
  /*热门评论*/
  .popular {
    padding-left: 0;
    width: 100%;
    .all-comment{
      font-size: 19px;
    }
    > li {
      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      align-items: self-start;
      .popular-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .item {
				flex: 1;
        margin: 0 10px;
				.info{
          color: #999;
          font-size: 13px;
          div:nth-of-type(1){
            margin-bottom: 6px;
          }        
          
        }
      }  
      .comment-ctr {
        cursor: pointer;
        .icon{
          color: #999;
          font-size: 20px;
          margin-right: 10px;
          margin-top: 15px;
        }
      }
    }
  }
  </style>
  